import router, { asyncRoutes } from './router'
import store from '@/store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

// 如何开启进度条  NProgress.start()
// 如何关闭进度条  NProgress.done()
import getPageTitle from '@/utils/get-page-title'
const whiteList = ['/login', '/404', '/demo'] // 白名单
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  // 设置动态网页标题
  document.title = getPageTitle(to.meta.title)
  // 判断token
  const token = store.state.user.token
  if (token) {
    // 已经登录
    console.log('已经登录')
    if (to.path === '/login') {
      console.log('已经登录 直接去首页 ')
      next('/') // 如果next指定了路径 页面跳转就不会经过router.afterEach的回调函数
      NProgress.done()
    } else {
      console.log('已经登录去其他页,放行')
      // await 保证后面的函数执行完毕后才跳转页面
      // 触发action中的函数 将用户信息存储到vuex中

      // 判断vuex中是否存储过用户信息 如果已经存储就不需要在获取了
      if (!store.state.user.UserInfo.userId) {
        // 1 需要获取页面的权限信息
        const menus = await store.dispatch('user/getuserinfo')
        console.log(menus, 'menus')
        // 2 动态的添加路由
        console.log(asyncRoutes, 'asyncRoutes')
        // 根据权限信息 过滤有访问权限的路由列表 保存在filterRouter中
        const filterRouter = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        console.log(filterRouter, 'filterRouter')
        router.addRoutes(filterRouter) // 动态路由添加是一个异步的过程 还没有加载完成就直接跳出页面出现白屏
        router.addRoutes([{ path: '*', redirect: '/404', hidden: true }])
        // 3 完成渲染左侧菜单需要 将 动态路由添加到vuex
        store.commit('menu/setMenuList', filterRouter)
        next({
          ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
          replace: true // 重进一次, 不保留重复历史
        })
      } else {
        next()
      }// 如果next没有指定了路径 页面跳转就不会经过router.afterEach的回调函数
    }
  } else {
    console.log('没有登录')
    if (whiteList.includes(to.path)) {
      console.log('白名单直接放行')
      next()
    } else {
      console.log('没有白名单，请先登录')
      next('/login')
      NProgress.done()
    }
  }
})
// 确定页面跳转完毕 router.afterEach() 页面跳转完毕

router.afterEach(() => {
  NProgress.done()
})
